<template>
  <div class="login_page">
    <!-- 頭部 -->
    <section class="login_header">
      <i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i>
      <p>当当登录</p>
      <i class="iconfont icon-gengduo3"></i>
    </section>

    <!-- 登录部分 -->
    <section class="login_main">
      <div class="login_option">
        <div :class="{active:index == currentIndex}" v-for="(item,index) in opiton" :key="index" @click="ChangeCurrentIndex(index)">{{item.cont}}</div>
      </div>
      <div class="login_input password" v-if="currentIndex==0">
        <input type="text" placeholder="请输入手机号/邮箱/昵称" />
        <input type="password" placeholder="请输入密码" />
        <div class="login_btn">
          <button>登录</button>
        </div>
      </div>
      <div class="login_input phoneNumber" v-if="currentIndex==1">
        <input type="number" placeholder="请输入手机号" />
        <input type="text" placeholder="请输入验证码" v-show="!show"/>
        <div class="login_btn">
          <button class="getNum" @click="show=false" v-show="show">获取验证码</button>
          <button v-show="!show">登录</button>
        </div>
      </div>
      <div class="regisiter">
        <span>忘记密码?</span>
        <span>立即注册</span>
      </div>
      <div class="third_link">
          <div class="link_img"><img src="../assets/images/link_qq.png"></div>
          <div class="link_img"><img src="../assets/images/link_wb.png"></div>
          <div class="link_img"><img src="../assets/images/link_zfb.png"></div>
      </div>
      <div class="safety">
          安全问题&nbsp;|&nbsp;<span>登录代表您已同意</span>&nbsp;《当当隐私政策》
      </div>
    </section>
  </div>
</template>

<script>
export default {
    data() {
        return {
            show:true,
            opiton:[
                {cont:'账号密码登录',name:'password'},
                {cont:'短信快捷登录',name:'phoneNumber'}
            ],
            currentIndex:0,
        }
    },
    methods: {
        ChangeCurrentIndex(index){
            this.currentIndex = index
        }
    },
};
</script>

<style lang="less" scoped>
.login_page {
  width: 100%;
  .login_header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0px 15px;
  }
  .login_main {
    width: 300px;
    margin: 40px auto;
    .login_option {
      display: flex;
      justify-content: space-between;
      div {
        height: 55px;
        line-height: 55px;
        font-size: 20px;
        font-weight: bold;
        color: #afafaf;
        border-bottom: 2px solid transparent;
        &.active {
          color: black;
          border-bottom: 2px solid black;
        }
      }
    }
    .login_input {
      input {
        width: 100%;
        height: 46px;
        background-color: #fafafa;
        text-indent: 32px;
        &:nth-child(1) {
          border-top: 1px solid rgba(153, 153, 153, 0.3);
          border-bottom: 1px solid rgba(153, 153, 153, 0.3);
        }
        &:nth-child(2) {
          border-bottom: 1px solid rgba(153, 153, 153, 0.3);
        }
      }
    }
    .login_btn {
      margin: 20px 0px 32px;
      button {
        width: 100%;
        height: 45px;
        font-size: 17px;
        color: white;
        background-color: rgb(251, 177, 182);
        outline: none;
        border: none;
        border-radius: 5px;
        box-shadow: 1px 2px -5px 0px;
      }
    }
    .regisiter {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0px 0px 18px;
      span {
        font-size: 14px;
        color: #ff3344;
      }
    }
    .third_link{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .link_img{
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-bottom: 30px;
            overflow: hidden;
            img{
                width: 45px;
                height: 45px;
            }
        }
    }
    .safety{
        font-size: 12px;
        color: #999;
        span{
            color: #333;
        }
    }
  }
}
</style>